<template>
  <el-aside width="300px" class="chapter-section">
    <h3 class="section-header">章节</h3>
    <el-menu default-active="0" class="chapter-menu" @select="selectChapter">
      <el-menu-item
          v-for="(chapter, index) in course.chapters"
          :key="chapter.chapterId"
          :index="String(index)"
          class="menu-item"
      >
        <div class="content">
          {{ chapter.title }}
          <el-tag type="primary" class="description">{{ chapter.description }}</el-tag>
        </div>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
const props = defineProps({
  course: {
    type: Object,
    required: true,
  }
});

const emit = defineEmits(['selectChapter']);

const selectChapter = (index) => {
  emit('selectChapter', parseInt(index));
};
</script>

<style scoped>
.chapter-section {
  padding: 20px;
  background: #f7f7f7;
  overflow-y: auto;
  border-left: 1px solid #e0e0e0;
}

.chapter-menu {
  border: none;
}

.section-header {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.menu-item .content {
  display: flex;
  align-items: center;
}

.menu-item .description {
  margin-left: 30px;
}
</style>
